<!-- 149 -->
<template>
	<div>
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="ViewRouteInfobyPfcd"
      ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
			<a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select v-model:value="queryForm.shopId" :placeholder="$t('common_pleaseSelect')" class="select-width">
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('T9_productType')" name="productType">
				<a-select v-model:value="queryForm.productType" allow-clear :placeholder="$t('common_pleaseSelect')" class="select-width">
					<a-select-option
						v-for="item in options.productTypeList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('T9_productId')" name="productId">
				<a-select v-model:value="queryForm.productId" show-search allow-clear :placeholder="$t('common_pleaseSelect')" class="select-width">
					<a-select-option
						v-for="item in options.productIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
       <a-form-item :label="$t('T9_route')" name="route">
          <a-input v-model:value="queryForm.route" allow-clear :placeholder="$t('common_pleaseEnter1')" />
      </a-form-item>
		</t-query-form>
		<a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_operationList')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button>{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
		<t-table :loading="searchBtnLoading" :data="list.tableData">
      <t-column field="groupId" :title="$t('T9_groupId')" />
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="operationDesc" :title="$t('T9_operationDesc')" />
		</t-table>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  const basicParams = {
    dtoName: 'ViewRouteInfoByPfcdDTO',
    queryId: 'GetProcessOperationList',
    version: '80003',
    menuName: 'viewRouteInfoByPfcd',
    usage: 'queryOperationList'
  }
  export default defineComponent({
    name: 'ViewRouteInfobyPfcd',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        queryForm: {
          shopId: undefined,
          productType: undefined,
          productId: undefined,
          route: ''
        },
        options: {
          shopIdList,
          productTypeList: [],
          productIdList: []
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          productType: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          productId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    watch: {
      'queryForm.productType': function (productType) {
        if (productType) {
          this.initOptions([{ name: 'productId', params: { shopId: this.queryForm.shopId, productType } }])
        } else {
          this.queryForm.productId = undefined
          this.options.productIdList = []
        }
      }
    },
    created() {
      this.initOptions([
        { name: 'productType', params: null }
      ])
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...basicParams }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res || []
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
